<template>
  <ElCard class="box-card">
    <template #header>
      <div>
        <ElForm
          ref="ruleFormRef"
          :model="user"
          :rules="rules"
          label-width="100px"
        >
          <ElFormItem label="用户名" prop="username">
            <ElInput v-model="user.username" />
          </ElFormItem>

          <ElFormItem label="密码" prop="password">
            <ElInput :show-password="true" v-model="user.password" />
          </ElFormItem>

          <ElFormItem>
            <ElButton type="primary" @click="login(ruleFormRef)">登录</ElButton>
            <ElButton @click="reset(ruleFormRef)" type="danger">重置</ElButton>
          </ElFormItem>
        </ElForm>
      </div>
    </template>
  </ElCard>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { ApiService } from '../../ts/ApiService';
import Tools from '../../ts/Tools';

import { TbUser, UserOtherInfo, TbUserInfo } from '../../ts/UserInfo';
import {
  ElFormItem,
  ElInput,
  ElButton,
  ElMessageBox,
  FormInstance,
  FormRules,
  ElForm,
} from 'element-plus';
import { BaseResult, BaseListResult, PageInfo } from '../../ts/Baseresult';

//状态管理部分
import { store } from '../../store/index';
import { storeToRefs } from 'pinia';
const { updateUserInfo } = store();

import { useRouter } from 'vue-router';
//路由跳转对象
const router = useRouter();

const ruleFormRef = ref<FormInstance>();
const user = ref(new TbUser());
const loading = ref(false);

//默认值
user.value.password = '1111111';
user.value.username = 'daisy111';

const validatePass = (rule: any, value: string, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'));
  } else {
    callback();
  }
};

const checkUsername = (rule: any, value: string, callback: any) => {
  if (/^[a-zA-Z][a-zA-Z0-9_]{3,15}$/.test(value)) {
    callback();
  } else {
    callback(new Error('用户名必须是字母开头，且长度为4-15位'));
  }
};

//校验规则定义
const rules = reactive<FormRules>({
  username: [
    {
      required: true,
      message: '登录名必须填写',
    },
    {
      validator: checkUsername,
    },
  ],

  password: [
    {
      required: true,
      message: '密码必须填写',
    },
    {
      validator: validatePass,
    },
  ],
});

function login(ruleFormRef: FormInstance) {
  loading.value = true;
  ruleFormRef.validate((valid) => {
    console.log('表单校验结果：', valid);
    if (valid) {
      user.value.password = Tools.md5(user.value.password);
      ApiService.post('/user/auth/login', user.value, (data: BaseResult) => {
        loading.value = false;
        if (data.success) {
          updateUserInfo(() => {
            ElMessageBox.alert(data.message, '登录成功').then(() => {
              // 跳转到首页
              router.push('/user/main');
            });
          });
        }
      });
    }
  });
}

function reset(ruleFormRef: FormInstance) {
  ruleFormRef.resetFields();
}
</script>

<style lang="scss" scope>
.box-card {
  width: 400px;
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  transform: translateY(20vh);
}
</style>
